@use "../mixins/_eui";
body {
  table .euiTableHeaderCellCheckbox {
    width: 44px;
  }
  table {
    &.euiTable {
      background-color: var(--browserTableRowEven) !important;
    }
    &.euiTable--responsive .euiTableRow {
      td {
        @media only screen and (max-width: 767px) {
          &:first-child {
            border-left: none;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
    }
    .euiTableRowCell,
    .euiTableRowCellCheckbox {
      border-color: var(--euiColorLightShade) !important;
    }
    .euiTableRow {
      td {
        &:first-child {
          border-left: 1px solid var(--euiColorLightShade);
        }
        &:last-child {
          border-right: 1px solid var(--euiColorLightShade);
        }
      }
      &-isSelected {
        border-color: var(--euiColorPrimary) !important;
        background: var(--tableRowSelectedColor) !important;
        td {
          &:first-child {
            border-left-color: var(--euiColorPrimary);
          }
          &:last-child {
            border-right-color: var(--euiColorPrimary);
          }
          border-top: 1px solid var(--euiColorPrimary);
          border-bottom: 1px solid var(--euiColorPrimary) !important;
        }
      }
      &:hover {
        background-color: var(--tableRowHoverColor);
      }
    }
  }

  @media only screen and (max-width: 767px) {
    table .euiTableRow-isSelected td {
      border-top-width: 0 !important;
      border-bottom-width: 0 !important;
    }
  }

  .euiBasicTable-loading tbody:before  {
    background-color: var(--euiColorPrimary) !important;
  }

  .inMemoryTableDefault {
    &:not(.stickyHeader) {
      > div:first-child {
        @include eui.scrollBar;
        overflow-x: auto;
      }
    }

    &.euiBasicTable-loading table {
      overflow: hidden;
    }

    &.noHeaderBorders,
    &.noBorders {
      .euiTableRow {
        &:not(:first-child) {
          .euiTableRowCell {
            border-top: 0 !important;
          }
        }
      }
      .euiTableRowCell {
        &:not(:last-child) {
          border-right: 0 !important;
        }
      }

      .euiTableHeaderCell {
        border: 0 !important;
      }
    }

    &.noBorders {
      .euiTableCaption {
        height: 0;
      }
      .euiTableRowCell {
        border-top: 0;
      }
      .euiTableRow:nth-child(odd) {
        td {
          &:first-child {
            border-left: 1px solid var(--euiColorEmptyShade);
          }
          &:last-child {
            border-right: 1px solid var(--euiColorEmptyShade);
          }
        }
      }
      .euiTableRow:nth-child(even) {
        td {
          &:first-child {
            border-left: 1px solid var(--browserTableRowEven);
          }
          &:last-child {
            border-right: 1px solid var(--browserTableRowEven);
          }
        }
      }
    }

    &.stickyHeader {
      .euiTableHeaderCell {
        position: sticky;
        top: 0;
        z-index: 1;
      }
    }

    table {
      overflow: initial;
      table-layout: auto;
      border-bottom: 1px solid var(--tableDarkestBorderColor);
    }

    .euiTableCellContent {
      white-space: nowrap !important;
      font:
        normal normal normal 13px/17px Graphik,
        sans-serif;
      letter-spacing: -0.13px;
      padding: 10px 18px;
    }

    .euiTableRowCell {
      max-width: 350px;

      border-color: var(--tableDarkestBorderColor);
      border-right: 1px solid var(--tableLightestBorderColor);
      border-bottom: none;
    }

    .euiTableCellContent span {
      color: var(--textColorShade);
      padding-top: 1px;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .euiTableHeaderCell {
      letter-spacing: 0;
      border: 1px solid var(--tableLightestBorderColor);

      .euiTableCellContent__text {
        color: var(--htmlColor) !important;
        font:
          normal normal 500 14px/17px Graphik,
          sans-serif;
        letter-spacing: -0.14px;
      }
    }

    .euiTableRowCell__mobileHeader {
      padding: 10px 18px !important;
      color: var(--htmlColor) !important;
      font:
        normal normal 500 14px/17px Graphik,
        sans-serif !important;
      letter-spacing: -0.14px;
    }

    .euiSpacer {
      display: none;
    }

    .euiTableRow:nth-child(odd) {
      background-color: var(--euiColorEmptyShade);
    }
    .euiTableRow:nth-child(even) {
      background-color: var(--browserTableRowEven);
    }

    // pagination
    .euiFlexGroup--justifyContentSpaceBetween {
      justify-content: center;
      margin: 0;

      .euiFlexItem {
        margin: 0;
      }

      .euiPagination {
        padding: 8px 10px;
      }
    }

    .euiTableHeaderMobile {
      display: none;
    }

    &.imtd-multiLineCells {
      .euiTableCellContent,
      .euiTableCellContent span {
        white-space: normal !important;
      }

      .euiTableCellContent {
        flex-direction: column;
        align-items: start;
      }

      .euiTableRowCell {
        vertical-align: top;
      }
    }

    @media only screen and (min-width: 575px) and (max-width: 767px) {
      .euiTableRow {
        margin-bottom: 0 !important;
      }
    }
  }
}
